<template>
	<view class="page">
		<view class="form-title">
			地区信息
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">
					地区
				</view>
				<view class="value">
					<view class="area-picker">
						<view class="area-picker-item">
							省
							<u-icon name="arrow-down-fill" size="15rpx" color="#999999"></u-icon>
						</view>
						<view class="area-picker-item">
							市
							<u-icon name="arrow-down-fill" size="15rpx" color="#999999"></u-icon>
						</view>
						<view class="area-picker-item">
							区县
							<u-icon name="arrow-down-fill" size="15rpx" color="#999999"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					GDP
				</view>
				<view class="value">
					<input placeholder="请输入（单位万元）"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					人口
				</view>
				<view class="value">
					<input placeholder="请输入（单位万）"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					人均收入
				</view>
				<view class="value">
					<input placeholder="请输入（元/年）"/>
				</view>
			</view>
		</view>
		<view class="form-title">
			建材市场情况
		</view>
		<view class="form-table">
			<view class="form-tabel-container">
				<view class="form-table-header">
					<view class="form-table-col" style="flex: 0 0 189rpx;">
						排名
					</view>
					<view class="form-table-col">
						名称
					</view>
				</view>
				<view class="form-table-row">
					<view class="form-table-col" style="flex: 0 0 189rpx;">
						1
					</view>
					<view class="form-table-col">
						大红门集美家居
					</view>
				</view>
				<view class="form-table-row">
					<view class="form-table-col" style="flex: 0 0 189rpx;">
						2
					</view>
					<view class="form-table-col">
						红星美凯龙
					</view>
				</view>
			</view>
		</view>
		<view class="form-title">
			今年交房情况
			<view class="form-title-btn-bar">
				<view class="form-title-btn">
					<u-icon name="/static/area/edit-icon.png" size="36rpx"></u-icon>
					编辑
				</view>
				<view class="form-title-btn">
					<u-icon name="/static/area/add-icon.png" size="36rpx"></u-icon>
					添加
				</view>
			</view>
		</view>
		<view class="form-table">
			<view class="form-tabel-container">
				<view class="form-table-header">
					<view class="form-table-col" style="flex: 0 0 167rpx;">
						编辑
					</view>
					<view class="form-table-col" style="flex: 0 0 176rpx;">
						小区名称
					</view>
					<view class="form-table-col" style="flex: 0 0 213rpx;">
						预计交房日期
					</view>
					<view class="form-table-col" style="flex: 0 0 149rpx;">
						交房套数
					</view>
					<view class="form-table-col" style="flex: 0 0 147rpx;">
						均价
					</view>
				</view>
				<view class="form-table-row">
					<view class="form-table-col" style="flex: 0 0 167rpx;">
						<view class="form-btn-bar">
							<view class="form-btn"><image src="/static/area/edit-icon2.png" mode="widthFix"></image></view>
							<view class="form-btn"><image src="/static/area/del-icon.png" mode="widthFix"></image></view>
						</view>
					</view>
					<view class="form-table-col" style="flex: 0 0 176rpx;">
						合顺家园合顺家园合顺家园合顺家园
					</view>
					<view class="form-table-col" style="flex: 0 0 213rpx;">
						2024-09
					</view>
					<view class="form-table-col" style="flex: 0 0 149rpx;">
						400
					</view>
					<view class="form-table-col" style="flex: 0 0 147rpx;">
						10000
					</view>
				</view>
				<view class="form-table-row">
					<view class="form-table-col" style="flex: 0 0 167rpx;">
						<view class="form-btn-bar">
							<view class="form-btn"><image src="/static/area/edit-icon2.png" mode="widthFix"></image></view>
							<view class="form-btn"><image src="/static/area/del-icon.png" mode="widthFix"></image></view>
						</view>
					</view>
					<view class="form-table-col" style="flex: 0 0 176rpx;">
						合顺家园
					</view>
					<view class="form-table-col" style="flex: 0 0 213rpx;">
						2024-09
					</view>
					<view class="form-table-col" style="flex: 0 0 149rpx;">
						400
					</view>
					<view class="form-table-col" style="flex: 0 0 147rpx;">
						10000
					</view>
				</view>
			</view>
			
			
		</view>
		<view class="footer-btn">
			提交
		</view>
		
		<u-popup v-model="xqParams.open" mode="center">
			<view class="xq-pop">
				<view class="form-title">
					添加小区
				</view>
				<view class="form">
					<view class="form-item">
						<view class="label">
							小区名称
						</view>
						<view class="value">
							<input placeholder="请输入"/>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							预计交房日期
						</view>
						<view class="value">
							<input placeholder="请输入"/>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							交房套数
						</view>
						<view class="value">
							<input placeholder="请输入"/>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							均价
						</view>
						<view class="value">
							<input placeholder="请输入（单位元）"/>
						</view>
					</view>
				</view>
				<view class="xq-pop-btn-bar">
					<view class="xq-pop-btn">
						取消
					</view>
					<view class="xq-pop-btn fill">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xqParams:{
					open:true
				}
			}
		}
	}
</script>

<style>
	uni-page-body{
		min-height: 100%;
		background: #F5F5F5;
	}
	.page{
		padding-bottom: 120rpx;
	}
	.form-title{
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		display: flex;
		align-items: center;
		padding: 38rpx 30rpx;
	}
	.form-title::before{
		content: "";
		display: inline-block;
		width: 8rpx;
		height: 24rpx;
		background: #3481F5;
		margin-right: 9rpx;
	}
	.form-title .form-title-btn-bar{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
	}
	.form-title .form-title-btn{
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #307DCD;
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}
	.form-title .form-title-btn:last-child{
		margin-right: 0;
	}
	.form-title .form-title-btn .u-icon{
		margin-right: 10rpx;
	}
	.form{}
	.form-item{
		border-bottom: 1px solid #F5F5F5;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}
	.form-item .label{
		line-height: 100rpx;
		flex: 0 0 auto;
	}
	.form-item .value{
		flex: 1;
	}
	.form-item .value input{
		height: 100rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		text-align: right;
	}
	.area-picker{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.area-picker-item{
		padding: 0 24rpx;
		line-height: 50rpx;
		background: #F5F5F5;
		border-radius: 25rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #999999;
		display: flex;
		align-items: center;
	}
	.area-picker-item:last-child{
		margin-right: 0;
	}
	.area-picker-item .u-icon{
		margin-left: 22rpx
	}
	.form-table{
		background: #FFFFFF;
		padding: 14rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
	}
	.form-tabel-container{
		overflow: auto;
		border-left: 1px solid #EDEFF2;
		border-right: 1px solid #EDEFF2;
	}
	.form-table-header{
		display: flex;
		align-items: center;
		
	}
	.form-table-header .form-table-col{
		background: #EDEFF2;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #666666;
		text-align: center;
		min-height: 72rpx;
		line-height: 30rpx;
		flex: 1;
		border-right: 1px solid #EDEFF2;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.form-table-header .form-table-col:last-child{
		border-right: none
	}
	.form-table-row{
		display: flex;
	}
	
	.form-table-row .form-table-col{
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		min-height: 97rpx;
		line-height: 30rpx;
		text-align: center;
		flex: 1;
		border-right: 1px solid #EDEFF2;
		border-bottom: 1px solid #EDEFF2;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
	}
	.form-table-row .form-table-col:last-child{
		border-right: none
	}
	.form-btn-bar{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.form-btn{
		margin-right: 15rpx;
	}
	.form-btn:last-child{
		margin-right: 0;
	}
	.form-btn image{
		vertical-align: top;
		width: 55rpx;
		height: auto;
	}
	
	.footer-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		line-height: 100rpx;
		background: #307DCD;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}
	.xq-pop{
		width: 650rpx;
		background: #F5F5F5;
	}
	.xq-pop-btn-bar{
		display: flex;
		align-items: center;
		margin-top: 40rpx;
	}
	.xq-pop-btn{
		flex: 1;
		line-height: 100rpx;
		text-align: center;
		background: #FFFFFF;
		font-size: 30rpx;
		font-family: PingFang;
		font-weight: 400;
		color: #5378AC;
		border: 1px solid #DCDCDC;
	}
	.xq-pop-btn.fill{
		color: #FFFFFF;
		background: #307DCD;
		border: 1px solid #307DCD;
	}
</style>